<template>
  <div class="container">
    <div class="header">
      <img :src="titleImg"/>
      <div class="shareBtn" @click="go">
         <img src="http://file.rzkeji.com/web/daka/icon/share.png" />
         邀请好友
      </div>
      <div class="title">
         <div class="showDetail">
             <span class="title_header">{{title.header}}</span>
         </div>
         <div class="showTime">
             <span class="time">{{title.time}}</span>|
             <span class="number">{{title.number}}次打卡</span>
         </div>
      </div>
    </div>
    <div class="middle">
      <div class="middle_title">打卡用户</div>
      <div class="middle_content clearfloat">
        <img class="nameImg" :src="value.photo_url" v-for="value in daka_user_list" />
      </div>
    </div>
    <div class="content_info">
      <div class="footer">
        <div class="footer_title">任务详情</div>
        <div class="fullText">
           <wxParse :content="article" />
        </div>
      </div>
    </div>
    <footer1 :data="details"></footer1>
  </div>
</template>
<script>
import wxParse from 'mpvue-wxparse'
import footer1 from '@/components/footer1'
export default {
  data () {
    return {
     article: '',
     titleImg:'',
     title:{
      header:"",
      time:"",
      number:"",
      setInter:""
    },
    daka_user_list:[],
      details:[
          {
              title: '首页',
              styleObject: {
                  background: '#fff',
                  width: '25%',
                  color:'#707070'
              },
              spanStyle:{
                  color:"#707070",
                  margin_top:"0"
              },
              index: 'first',
              backgroundImg: 'http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/daka/icon/home.png',
              selectImg: 'http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/daka/icon/home.png',
              tag: '1',
              hasIcon:1
          },
          {
              title: '讨论',
              styleObject: {
                  background: '#fff',
                  width: '25%'
              },
              spanStyle:{
                  color:"#707070",
                  margin_top:"0"
              },
              index: 'discuss',
              backgroundImg: 'http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/daka/icon/comment.png',
              selectImg: 'http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/daka/icon/comment.png',
              tag: '0',
              hasIcon:1
          },
          {
              title: '打卡',
              styleObject: {
                  background: 'gray',
                  timeBackground: '#d81e06',
                  width: '50%',
                  color: '#fff'
              },
              spanStyle:{
                  color:"#fff",
                  margin_top:"8%"
              },
              index: 'card',
              tag: '1',
              hasIcon:0
          }
    ]
  }
 },
  components: {
    wxParse,
    footer1
  },
  methods: {
    go(){
      wx.navigateTo({
        url:'../share/main'
      })
    },
    getDetails(value){
    var _this=this;
    var userToken=wx.getStorageSync('userToken');
    _this.daka_user_list=[];
    wx.request({   //获取用户打卡信息列表
    url: 'https://daka.rzkeji.com/api/daka/get-daka-detail', 
    header: {
      'content-type': 'application/json' // 默认值
    },
    data:{
      id:value,
        daka_token:userToken ? userToken : '',
    },
    success: function(res) {
      _this.$store.dispatch('setFooter',res);
      _this.article=res.data.data.content;
      _this.title.header=res.data.data.title;
      _this.title.time=res.data.data.created_at;
      _this.title.number=res.data.data.daka_count;
      _this.titleImg=res.data.data.img_url;
      for(var i=0;i<res.data.data.daka_user_list.length;i++)
      {
        _this.daka_user_list.push({
              "id":res.data.data.daka_user_list[i].id,
              "photo_url":res.data.data.daka_user_list[i].photo_url,
              "nickname":res.data.data.daka_user_list[i].nickname
        })
      }
      _this.$store.dispatch('setDakaId',res.data.data.id) 

    }
    })
    }
  },
  onLoad: function(option){
    if(option.id==undefined)
    {
      option.id=""
    }
    this.getDetails(option.id)
    var _this=this
    var time=30;
    this.setInter=setInterval(function(){
      time--;
      _this.$store.dispatch("setTime",time)
      if(time<1)
      {
        clearInterval(_this.setInter)
      }
    },1000)
  },
  onHide(){
    console.log('a')
    this.$store.dispatch("setTime",30)
    clearInterval(this.setInter)
  },
  onUnload(){
    console.log('a')
    this.$store.dispatch("setTime",30)
    clearInterval(this.setInter)
  }
}
</script>

<style scoped>
@import url("~mpvue-wxparse/src/wxParse.css");
.container{width: 100%;height: 100%;background: #e4e4e4;padding-bottom: 50px;}
.header{width: 100%;background: #fff;padding-bottom: 20px;}
.header img{width: 100%;height: 200px}
.shareBtn{width:90px;height:25px;position: absolute;right: 30px;top: 30px;background: rgba(0,0,0,0.8) ;font-size: 14px;line-height: 25px;border-radius: 30px;color: #fff}
.shareBtn img{width: 15px;height:15px;vertical-align: middle;margin-left: 6px}
.swiper{width: 100%;height: 150px;}
.swiper .item{width: 100%;height: 150px;}
.swiper .item img{width: 100%;height: 150px;}
.title{padding-left:15px;padding-top: 6px}
.showDetail{font-weight:600;font-size: 24px;margin-right: 15px;margin-bottom: 10px;}
.title_detail{margin-left: 10px}
.showTime{width: 100%;height: 10px;line-height: 10px;font-size: 16px;color: gray;margin-top: 20px;}
.time{padding-right:10px}
.number{padding-left: 5px}

.middle{width: 100%;padding-bottom: 10px;margin-top: 5px;background: #fff}
.middle_title{width: 100%;height: 40px;line-height: 40px;font-size: 20px;font-weight: 600;padding-left:15px;}
.middle_content{width: 100%;padding-left: 20px;}
.nameImg{width: 40px;height:40px;display: block;float: left;margin-right: 4px;margin-bottom: 5px;border-radius: 40px;}

.content_info{width: 100%;background-color: #fff}
.footer{width: 95%;padding-left: 10px;margin-top: 5px;background: #fff;margin-right: 10px}
.footer_title{width: 100%;height: 54px;line-height: 54px;font-size: 20px;font-weight: 600}
.fullText{padding-bottom: 56px;}
.footer1{width: 100%;height: 50px;background: red;position: fixed;left: 0;bottom: 0;}
.footer1 ul{width: 100%;height: 50px;display: flex;justify-content: row;text-align: center;font-size: 20px;text-align: center;line-height: 50px;}
</style>
